<template>
  <div id="pos">

  </div>
</template>


<script>
  import * as THREE from 'three';
  // import * as THREE from 'three'
  import OrbitControls from 'three/examples/js/controls/OrbitControls';
  import GLTFLoader from 'three/examples/js/loaders/GLTFLoader';

  let scene, camera, renderer, circle, canvas
  var pos = document.getElementById('pos');
  var controls = new OrbitControls();
  // var GLTFLoader = new GLTFLoader();


  export default {
    name: 'threeJs',
    data() {
      return {
       /* camera: null,
        scene: null,
        renderer: null,
        mesh: null*/
      }
    },
    methods: {
      /* 场景 */
      initScene: function() {
        scene = new THREE.Scene();
      },
      /* 相机 */
      initCamera: function() {
        camera = new THREE.PerspectiveCamera(45, pos.offsetWidth / pos.offsetHeight, 0.1, 10000);
        camera.position.set(0, 100, 200);
        camera.lookAt(new THREE.Vector3(0, 0, 0));
      },

      /* 渲染器 */
      initRenderer: function() {
        renderer = new THREE.WebGLRenderer({
          antialias: true,
          alpha: true
        });
        renderer.setSize(pos.offsetWidth, pos.offsetHeight);
        document.body.appendChild(renderer.domElement);
        renderer.setClearColor('#FFFACD');
        // 把渲染器的渲染结果canvas对象插入到'pos'对应的div元素中
        document.getElementById('pos').appendChild(renderer.domElement);
      },
      /* 灯光 */
      initLight() {
        var directionalLight = new THREE.DirectionalLight(0xffffff, 1)//模拟远处类似太阳的光源
        directionalLight.position.set(0, 100, 0).normalize()
        scene.add(directionalLight)

        // scene.add(new THREE.AmbientLight(0xCCCCCC));
        let ambient = new THREE.AmbientLight(0xffffff, 1) //AmbientLight,影响整个场景的光源
        ambient.position.set(0, 0, 0)
        scene.add(ambient)

        let spotLight = new THREE.SpotLight(0xffffff)
        spotLight.position.set(100, 500, 400)
        scene.add(spotLight)
      },
      /* 控制器 */
      initControls: function() {

        controls = new THREE.OrbitControls(camera, renderer.domElement);
        // 添加惯性
        controls.enableDamping = true
        controls.enablePan = true
      },

      initContent: function() {
        // model
        var loader = new THREE.GLTFLoader().setPath('src/static/model/')
        loader.load('guobo.gltf', function(gltf) {
          gltf.scene.traverse(function(child) {
            if (child.isMesh) {
              child.material.emissiveMap = child.material.map
              child.material.color.set('#4089fe')
              child.material.transparent = true
              child.material.opacity = 0.65
            }
          })
          scene.add(gltf.scene)

          gb = gltf.scene.getObjectByName('guobozhongxin')
          gb.scale.x = 1
          gb.scale.y = 1
          gb.scale.z = 1
        })
      },

      /* 更新 */
      update: function() {
        controls.update()
      },

      /* 窗口变动触发的方法 */
      onWindowResize: function() {
        // 重新设置相机的宽高比
        camera.aspect = pos.offsetWidth / pos.offsetHeight;
        // 更新相机投影矩阵
        camera.updateProjectionMatrix();
        // 更新渲染器大小
        renderer.setSize(pos.offsetWidth, pos.offsetHeight);
      },


      init: function() {
        // 兼容性判断，若不兼容会提示信息
        // if (!Detector.webgl) Detector.addGetWebGLMessage()

        canvas = document.getElementById('c')

        this.initScene()
        this.initCamera()
        this.initRenderer()
        this.initLight()
        this.initControls()
        this.initContent()

        window.addEventListener('resize', onWindowResize, false)

      },
      animate: function() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
        this.update();
      }
    },
    mounted() {
      this.init()
      this.animate()
    }
  }
</script>
<style scoped>
  #pos {
    position: absolute;
    width: 600px;
    height: 600px;
    left: 300px;
    top: 100px;
  }

</style>
